/*
 * @Description: 账单列表和行程列表
 * @Author: yingying.fan
 * @Date: 2019-04-01 11:04:34
 * @Last Modified by: zhenqiang.hong
 * @Last Modified time: 2019-04-08 10:29:03
 */
<template>
  <scroll
    ref="scroll"
    :getListData="getListDataByScroll"
    :noDataText="noDataText"
  >
    <slot
      name="header"
      slot="header"
    ></slot>
    <template v-for="(item, i) in dataList">
      <!-- 月份分类栏 -->
      <div
        class="flex-h flex-vc date-item"
        v-if="isDifferentToLast(item.MONTH,i-1)"
        :key="'time_'+i"
      >
        <span class="flex1">{{item.MONTH|formatDate}}</span>
        <span v-if="item.REFUND_AMOUNT">
          退款&nbsp;&yen;{{item.REFUND_AMOUNT|formatPrice}}
          &nbsp;&nbsp;|&nbsp;&nbsp;
        </span>
        <span v-if="item.BILL_AMOUNT">消费&nbsp;&yen;{{item.BILL_AMOUNT|formatPrice}}</span>
      </div>
      <div
        :key="'div_'+i"
        style="background:#ffffff"
      >
        <!-- 账单记录栏 -->
        <component
          v-for="(detail,index) in item.TRADE_DETAIL"
          :key="'detail_'+i+'_'+index"
          :data="detail"
          v-bind:is="getItemComponent(detail.TRADE_TYPE)"
          :class="{'xb_border ddd':index!==0||!isDifferentToLast(item.MONTH,i-1)}"
        ></component>
      </div>
    </template>
  </scroll>
</template>

<script>
import { dateFtt } from 'vue-xiaobu-utils'
import ScrollWithNet from '@/components/scroll/ScrollWithNet'
import {
  ConsumePayItem,
  ConsumeRefundItem,
  ConsumeFreezonItem,
  ConsumeUnfreezonItem,
  ConsumeRechargeItem,
  ConsumeReturnItem
} from '../components/ConsumeItem/ConsumeItem.js'
import * as TradeType from '../../consumedetail/constants/TradeType.js'
export default {
  name: 'ConsumeList',
  components: {
    'scroll': ScrollWithNet,
    'pay-item': ConsumePayItem,
    'recharge-item': ConsumeRechargeItem,
    'refund-item': ConsumeRefundItem,
    'return-item': ConsumeReturnItem,
    'freezon-item': ConsumeFreezonItem,
    'unfreezon-item': ConsumeUnfreezonItem
  },
  props: {
    // 传入获取列表数据的方法
    getListByApi: {
      type: Function,
      default: null,
      required: true
    }
  },
  data() {
    return {
      noDataText: '无数据',
      itemName: '',
      dataList: []
    }
  },
  filters: {
    formatDate(dateStr) {
      if (!dateStr) {
        return ''
      }
      if (dateStr.length < 10) {
        dateStr = dateStr + '-01'
      }
      return dateFtt('yyyy年MM月', dateStr)
    },
    formatPrice(money) {
      if (!money) {
        return '0.00'
      }
      return money.toFixed(2)
    }
  },
  mounted() {
  },
  methods: {
    // 根据消费类型动态获取消费模块组件
    getItemComponent(type) {
      let itemName = ''
      switch (type) {
        case TradeType.RECHARGE:
          itemName = 'recharge-item'
          break
        case TradeType.PAY:
          itemName = 'pay-item'
          break
        case TradeType.REFUND:
          itemName = 'refund-item'
          break
        case TradeType.RETURN_CASH:
          itemName = 'return-item'
          break
        case TradeType.FREEZON:
          itemName = 'freezon-item'
          break
        case TradeType.UNFREEZON:
          itemName = 'unfreezon-item'
          break
        default:
          itemName = 'pay-item'
          break
      }
      return itemName
    },
    // 判断列表的月份是否与上一页不同：不同则展示，相同则隐藏
    isDifferentToLast(month, lastIndex) {
      if (lastIndex >= 0 && month === this.dataList[lastIndex].MONTH) {
        return false
      }
      return true
    },
    // 通过滚动上拉获取数据
    getListDataByScroll(pageIndex, pageSize) {
      return this.getListByApi(pageIndex, pageSize).then(body => {
        let list = body.LIST || []
        if (pageIndex === 1) {
          this.dataList = list
        } else {
          this.dataList = this.dataList.concat(list)
        }
        console.log(this.dataList)
        // TODO: 注意这里return的length不可以是list.length
        return { length: 10, count: body.COUNT }
        // return { length: 0, count: 0 }
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>

<style>
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
/* .mescroll > div:nth-child(2) {
  background-color: #ffffff;
} */
.date-item {
  padding: 0 30px;
  height: 70px;
  background-color: #f2f5f6;
  color: #999999;
  font-size: 24px; /*px*/
}
</style>
